
import Vue from 'vue'
import { compAttrConfig,compBarConfig,formAttrConfig,FormConfig,formTemplateConfig } from '../config/index.js'
// console.log('formTemplateConfig',formTemplateConfig)
window.$FormEngineCreate = new Vue({
  el: '#form-engine-create',
  watch: {
    'formTemplateConfig.formItems'(val) {
      this.updateFormItemSpan(formTemplateConfig.cols)
    },
    'formTemplateConfig.selectedItem'(val) {
      this.selectFormItemHandler(val)
    },
    'formTemplateConfig.cols'(val) {
      this.updateFormItemSpan(val)
    }


  },
  data() {
    return {
      modalStatus: false,
      active_name_config: 'compAttrConfig',
      expandStatus: {
        left: true,
        right: true
      },
      compAttrConfig: compAttrConfig,
      formAttrConfig: formAttrConfig,
      compBarConfig: compBarConfig,
      formTemplateConfig: formTemplateConfig,
      previewFormConfig: null,

    }
  },
  mounted() {
    // this.initFES()


  },
  methods: {
    updateFormItemSpan(cols) {
      formTemplateConfig.formItems.forEach(item => {
        const span = item.configurableFieldItems.find(({ key }) => key == 'span')
        if (span?.attrs) span.attrs.cols = cols

      })
    },
    /**保存的localStorage */
    addToLoacalTemplate() { },

    saveAsJsonFile() {
      const json = this.formTemplateConfig.getRreviewFormConfigJson()
      console.log('json',JSON.parse(json))

    },

    preview() {
      this.modalStatus = true
      const previewJson = this.formTemplateConfig.getRreviewFormConfigJson()

      const previewFormConfig = new FormConfig(JSON.parse(previewJson))
      this.previewFormConfig = previewFormConfig
    },
    /**保存到后端服务器 */
    save() {
      const json = this.formTemplateConfig.getFormConfigJson()
      console.log('json',json)
    },
    selectFormItemHandler(item) {
      console.log('item',item)
      if (item) {
        this.compAttrConfig.resetFormItems(item.configurableFieldItems)
        this.compAttrConfig.resetFormData(item)
      } else {
        this.compAttrConfig.resetFormItems()
        this.compAttrConfig.resetFormData()
      }
      this.active_name_config = 'compAttrConfig'
    },
    async initFES() {
      const html = await fetch('/form-engine-show/index.html').then(r => r.text())
      $('.fec .fes').html(html)

    },
    toggleExpand(type) {
      if (type == 'l') {
        this.expandStatus.left = !this.expandStatus.left
      }
      else {
        this.expandStatus.right = !this.expandStatus.right
      }
    }
  }
})

